<template>
  <div class="cellDemo">
    <div class="cell-div">
      <van-cell-group>
        <van-cell title="单元格" value="内容" />
        <van-cell title="单元格" value="内容" label="描述信息" />
      </van-cell-group>
    </div>
    <div class="cell-div">
      <van-cell-group inset>
        <van-cell title="单元格" value="内容" />
        <van-cell title="单元格" value="内容" label="描述信息" />
      </van-cell-group>
    </div>
    <div class="cell-div">
      <van-cell title="单元格" value="内容" size="large" />
      <van-cell title="单元格" value="内容" size="large" label="描述信息" />
    </div>
    <div class="cell-div">
      <van-cell title="单元格" icon="location-o" />
    </div>

    <div class="cell-div">
      <van-cell title="单元格" is-link />
      <van-cell title="单元格" is-link value="内容" />
      <van-cell title="单元格" is-link arrow-direction="down" value="内容" />
    </div>

    <div class="cell-div">
      <van-cell title="URL 跳转" is-link url="https://baidu.com" />
      <van-cell title="路由跳转" is-link to="index" />
    </div>

    <div class="cell-div">
      <van-cell-group title="分组1">
        <van-cell title="单元格" value="内容" />
      </van-cell-group>
      <van-cell-group title="分组2">
        <van-cell title="单元格" value="内容" />
      </van-cell-group>
    </div>

    <div class="cell-div">
      <van-cell value="内容" is-link>
        <!-- 使用 title 插槽来自定义标题 -->
        <template #title>
          <span class="custom-title">单元格</span>
          <van-tag type="danger">标签</van-tag>
        </template>
      </van-cell>

      <van-cell title="单元格" icon="shop-o">
        <!-- 使用 right-icon 插槽来自定义右侧图标 -->
        <template slot="right-icon">
          <van-icon name="search" class="search-icon" />
        </template>
      </van-cell>
    </div>
  </div>
</template>

<script>
// https://vant-contrib.gitee.io/vant/#/zh-CN/cell
import { Cell, CellGroup } from "vant";
export default {
  components: {
    vanCell: Cell,
    vanCellGroup: CellGroup,
  },
  data() {
    return {};
  },
  mounted() {

  },
  methods: {},
};
</script>

<style lang="less" >
.cellDemo {
  background-color: antiquewhite;

  .cell-div {
    margin: 10px 0;
  }
}
</style>
